<!--  -->
<template>
  <div v-if="shopDetails">
    <BackTo iconColor="#eee" />
    <div class="shupbusiness">
      <div class="shopAvatar" @click="bindClick">
        <img :src="shopDetails.avatar" alt="" />
      </div>
      <div class="content">
        <div class="title" @click="bindClick">
          <p>品牌</p>
          <div>
            <h2>{{ shopName }}</h2>
            <i class="icon-you iconfont"></i>
          </div>
        </div>
        <div class="desc" @click="bindClick">
          <span>{5}</span>
          <span style="margin: 0 5px">月售{{ shopDetails.sellCount }}单</span>
          <span>硅谷专送</span>
          <span style="margin: 0 5px"
            >约{{ shopDetails.deliveryTime }}分钟</span
          >
          <span>距离{{ shopDetails.distance }}</span>
        </div>
        <div
          class="preferential"
          v-if="shopDetails.supports"
          @click="bindClick"
        >
          <p>{{ shopDetails.supports[0].name }}</p>
          <span>{{ shopDetails.supports[0].content }} </span>
          <p>
            {{ shopDetails.supports.length }}个优惠 ▼
            <i></i>
          </p>
        </div>

        <!-- 下方滑动条 -->
        <div class="navbar">
          <nav>
            <p
              v-for="(item, i) in navContent"
              :key="i"
              :class="{ cur: navIndex == i }"
              @click="changeNav(i)"
            >
              {{ item.content }}
            </p>
          </nav>
          <div
            class="navbarContent"
            id="scroll"
            :class="{ overflowHidden: navIndex == 0 }"
          >
            <!-- Products component-->
            <Products v-model="navIndex" />
            <!-- comment component-->
            <Comments v-model="navIndex" :shopDetails="shopDetails" />
            <MerchantShop v-model="navIndex" :shopDetails="shopDetails" />
          </div>
        </div>
      </div>
    </div>
  </div>
</template>
<script>
import BackTo from "../../components/backTo/backTo.vue";
import "../../assets/js/iconfont";
import { reqShopInfo } from "../../apis/profile/profile";
import Products from "../../components/Products/Products.vue";
import Comments from "../../components/Comments/Comments.vue";
import MerchantShop from "../../components/MerchantShop/MerchantShop.vue";
export default {
  data() {
    return {
      navIndex: 0,
      scrool_left_index: 0,
      shopDetails: null,
      navContent: [
        { content: "点餐" },
        { content: "评价" },
        { content: "商家" },
      ],
    };
  },
  props: ["id", "shopName"],
  components: { BackTo, Products, Comments, MerchantShop },
  computed: {},
  methods: {
    bindClick() {
      this.navIndex = 2;
    },
    changeNav(currentIndex) {
      this.navIndex = currentIndex;
      if (this.navIndex == 0) {
        document.querySelector("#scroll").scrollTop = 0;
      }
      if (this.navIndex == 1) {
        let { commit } = this.$store;
        commit("isLogin", (isLogin) => {
          if (isLogin) {
            this.navIndex = currentIndex;
          } else {
            this.$router.push("/login");
          }
        });
      } else {
      }
    },
  },
  mounted() {
    reqShopInfo().then((res) => {
      this.shopDetails = res.data.data;
    });
  },
};
</script>
<style lang="stylus" rel="stylesheet/stylus" scoped>
.icon-fanhui
  color: #eee
.icon
  width: 20px;
  height: 20px;
p
  margin: 0;
  font-size:20px
.container >>> .back
  width: initial !important;
.shupbusiness
  margin-top: -50px;
  .shopAvatar
    background-image: url('../../assets/images/shop/3.jpg')
    height: 50px
    width: 100%;

    img
      width: 100px;
      height: 100px;
      display: block;
      margin: auto;
  .content
    padding:50px 0 0 0;
    background-color: #fff;
    .title
      font-size:20px;
      display: flex;
      width: 80%;
      margin: auto;
      justify-content: space-evenly;
      align-items: center;
      > p
        background-color: rgb(248, 225, 55);
        padding: 5px 7px;
        font-size: 15px;
      > div
        justify-content: space-around;
        align-items: center;
        display: flex;
        > h2
          margin: 0;
          font-size:22px;
          width: 195px;
          text-overflow: ellipsis;
          overflow : hidden;
          white-space: nowrap
      .icon-you
        font-size: 14px;
        margin-left: 16px;

    .desc,
    .preferential
      text-align: center
      font-size: 13px;
    .desc
        width: 80%;
        margin: auto;
        text-overflow: ellipsis;
        overflow: hidden;
        white-space: nowrap;
        margin-top: 10px;
    .preferential
      display: flex;
      width: 85%;
      margin:10px auto;
      border:1px solid #eee;
      padding:4px;

      >p:nth-child(1)
        font-size: 12px;
        background-color: green
        color:#fff;
        padding: 2px;
        border-radius: 2px;
        margin-right:4px;
      >span
        width: 220px;
        text-overflow: ellipsis;
        overflow : hidden;
        white-space: nowrap
      >p:last-of-type
        font-size:12px;
    .navbar
      nav
        display: flex;
        justify-content: space-around;
        align-items: center
        border-bottom: 1px solid #eee;
        p
          font-size:16px;
          padding: 15px 0 10px 0;
          border-bottom: 5px solid transparent;

          &.cur
            color: rgb(3, 167, 116)
            border-bottom: 5px solid rgb(3, 167, 116)

      .navbarContent

        > div
          display: none;

          &.cur
            display: block;
h6
  margin:0
.navbarContent
  height: calc(100vh - 250px);
  overflow-y: auto;
  overflow-x: hidden
.overflowHidden
  overflow: hidden !important
</style>
